html, body {
	margin: 0px;
	padding: 0px; 
	color: #333;
    background: #fff;
    height: 100%;
}

*{
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	
	transition: all 0.8s;
	font: 16px/1.3 'Arial','Microsoft YaHei';
}

.container {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main {
	min-height: 667px;
	width: 375px;
	border-radius: 2px; 
    box-sizing: border-box;
    position: relative;
}

.header {
	height: 50px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.body {
	height: calc(100% - 100px);
	overflow: auto;
	width: 100%;
	box-sizing: border-box; 
}

.footer {
	min-height: 50px;
	height: auto;
	width: 100%; 
	box-sizing: border-box;  
	position: absolute;
	bottom: 0px;
}

.footer:after {
	content: '';
	visibility: hidden;
	height: 0px;
	width: 0px;
	display: block;
	clear:both;  
}

@media screen and ( max-width: 375px ) {
	.container {
		display: block;
	}

	.main {
		display: block;
		height: calc(100%);
		min-height: calc(100%); 
		width: 100%;
		border-radius: 0px;  
	}

	.body {
		height: calc(100% - 100px);
		width: 100%;
	}
}